<template>
  <el-card shadow="never">
    <!-- 搜索 -->
    <el-form :model="searchForm" class="mb-3" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="搜索">
            <el-select v-model="searchForm.keyword" placeholder="請選擇">
              <el-option
                v-for="item in tabbars"
                :key="item.id"
                :label="item.name"
                :value="item.status"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="時間選擇">
            <el-date-picker
              v-model="searchForm.time"
              type="daterange"
              range-separator="至"
              start-placeholder="開始時間"
              end-placeholder="結束時間"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button type="primary" @click="getData">搜索</el-button>
          <el-button @click="resetSearchForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 新增刷新 -->
    <ListHeader
      layout="refresh,download"
      @refresh="getData"
      @download="handleExportExcel"
    ></ListHeader>

    <!-- 表格 -->

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="商品名稱" />

      <el-table-column label="圖片">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.cover_pic"
            :preview-src-list="[row.cover_pic]"
            :initial-index="0"
            fit="cover"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品價格" />
      <el-table-column prop="sale_num" label="銷量" />
      <el-table-column prop="browse" label="瀏覽量" />
      <el-table-column prop="num" label="庫存" />
      <el-table-column prop="total" label="銷售額" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="flex justify-center mt-4"
      @current-change="getData"
      :current-page="curpage"
      :page-size="limit"
    />
  </el-card>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getAnalyse, getExProduct } from "~/api/product.js";

import ListHeader from "~/components/ListHeader.vue";

import { useInitTable } from "~/composables/useCommon.js";

const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  curpage,
  total,
  limit,
  getData,
  handleDelete,
} = useInitTable({
  searchForm: {
    keyword: "",
    time: [],
  },
  getList: getAnalyse,
  // onGetListSuccess: (res) => {
  //   (total.value = res.data.total), (tableData.value = res.data.data);
  // },
});

// const searchForm = reactive({
//   keyword: "",
// });

const tabbars = [
  {
    status: "1",
    name: "最高銷售量",
  },
  {
    status: "2",
    name: "最低銷售量",
  },
  {
    status: "3",
    name: "最高瀏覽量",
  },
  {
    status: "4",
    name: "最低瀏覽量",
  },
];

function handleExportExcel() {
  getExProduct().then((res) => {
    console.log(res);
    window.open(`https://testapi.bscd8.com/storage/excel/${res}`, "_blank");
  });
}
</script>
